<template>
    <div id="app">
        <Head>个人资料</Head>
        <div class="center">
            <div class="line toptwo">
                <div class="logo">
                    <div class="img">
                        <img v-if="sub.photo_img_src" :src="sub.photo_img_src?sub.photo_img_src:'../../assets/freelance/images/logobg.png'">
                        <van-uploader :after-read="uploadAvatar"/>
                    </div>
                    <div class="logoname">上传头像</div>
                </div>
            </div>
            <van-field
              required
              v-model="sub.username"
              label="姓名"
              placeholder="请填写姓名"
              class="reset_after"
            />
            <div class="for_btn">
              <div class="sync_phone">
                <van-checkbox v-model="sub.hideusername" @change="hideusername" icon-size="16px">先生/女士</van-checkbox>
              </div>
            </div>
            <van-field class="reset_after" name="sex" label="性别">
              <template #input>
                <van-radio-group
                  v-model="sub.sex"
                  direction="horizontal"
                  icon-size="14px"
                >
                  <van-radio name="1">男</van-radio>
                  <van-radio name="2">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              :value="sub.age"
              label="年龄"
              readonly
              placeholder="请选择年龄"
              @click="isshowage=true"
              class="form_choose reset_after"
            />
            <van-field
              required
              :value="sub.education"
              label="学历"
              readonly
              placeholder="请选择学历"
              @click="showPickerEdu=true"
              class="form_choose reset_after"
            />
            <van-field
              required
              :value="sub.enter_job_time_name"
              label="开始工作时间"
              readonly
              placeholder="请选择时间"
              @click="showPickerEnterJob =true"
              class="form_choose reset_after"
            />
            <van-field
              v-model="sub.address"
              label="现居地"
              placeholder="请填写地址"
              class="reset_after"
            />
            <van-field
              required
              v-model="sub.postionname"
              label="职称"
              placeholder="请填写职称"
              class="reset_after"
            />
            <van-field
              required
              :value="sub.present"
              label="个人介绍"
              readonly
              placeholder="请简要介绍"
              @click="show=true"
              class="form_choose reset_after no_border"
            />

            <div class="form_split_10"></div>
            <van-field
              required
              v-model="sub.call"
              label="联系电话"
              placeholder="请填写您的联系电话"
              type="number"
              class="reset_after"
            />
            <van-field
              v-model="sub.wechat"
              label="联系微信"
              placeholder="请填写微信号"
              class="reset_after no_border"
            />
            <div class="for_btn">
              <div class="sync_phone">
                <van-checkbox v-model="sub.callsny" @change="snyphone" icon-size="16px">同手机号</van-checkbox>
              </div>
            </div>

            <div v-if="paymoney!='0'">
                <div class="line top">
                    <div class="title">需要支付</div>
                    <div class="money">{{paymoney}}元</div>
                </div>
                <div class="line stip">完成支付后即可完成发布，金额概不退还</div>
            </div>

            <div class="btn" @click="save">保&nbsp;&nbsp;存</div>
        </div>
        <van-popup v-model="isshowage" position="bottom">
            <van-picker
                title="年龄"
                show-toolbar
                v-model="sub.age"
                :columns="[18, 19, 20, 21, 22, 23, 24, 25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55]"
                @confirm="addage"
                @cancel="isshowage=false"
                />
        </van-popup>
        <van-popup v-model="showPickerEdu" position="bottom">
            <van-picker
                show-toolbar
                :columns="columnsEdu"
                :default-index="educationDefaultIndex"
                @confirm="onConfirmEducation"
                @cancel="showPickerEdu = false"
            />
        </van-popup>
        <van-popup v-model="showPickerEnterJob" position="bottom">
            <div class="for-pop-title" @click="handleNoJobTime">无工作经验</div>
            <van-datetime-picker
                v-model="currentDateEnterJob"
                type="year-month"
                title=""
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirmEnterJob"
                @cancel="showPickerEnterJob = false"
            />
        </van-popup>
        <van-popup
        v-model="show"
        position="right"
        duration="0.2"
        :overlay="true"
        :style="{ height: '100%', width: '100%' }"
        >
            <Present
                @hidePresent="toggle"
                @doPresent="dopresent"
            ></Present>
        </van-popup>
        <van-overlay :show="uploading"><van-loading type="spinner" size="24px">正在上传...</van-loading></van-overlay>
        <van-popup v-model="showPayment" closeable position="bottom">
            <PopupPayment
                :amount="paymoney"
                @handlerSubmit="handlerSubmit"
            ></PopupPayment>
        </van-popup>
        <PaySubmit ref="paySubmit" :payment="paymoth" success-url="/freelance/personalinfo"></PaySubmit>
    </div>
</template>
<script>
import PaySubmit from '@/components/service/PaySubmit'
import PopupPayment from '@/components/service/PopupPayment'
import http from '@/utils/http'
import api from '@/api'
import Present from '@/components/freelance/present'

export default {
  components: {
    PaySubmit,
    PopupPayment,
    Present
  },
  data () {
    return {
      uploading: false,
      isshowage: false,
      showPickerEdu: false,
      educationDefaultIndex: 0,
      showPickerEnterJob: false,
      currentDateEnterJob: '',
      minDate: '',
      maxDate: '',
      isNoJobTime: false,
      show: false,
      paymoney: '0', // 是否支付 if0不支付 else支付
      sub: {
        id: '',
        photo_img: '',
        photo_img_src: '',
        username: '',
        hideusername: false,
        hideusername_cn: 0,
        sex: '',
        age: '',
        educationid: '',
        education: '',
        enter_job_time: '',
        enter_job_time_name: '',
        address: '',
        postionname: '',
        present: '',
        call: '',
        wechat: '',
        callsny: ''
      },
      paymoth: 'wxpay',
      showPayment: false
    }
  },
  created () {
    this.fetchData()
    this.$store.dispatch('getClassify', 'education').then(() => {
      // 恢复最高学历
      this.educationDefaultIndex = this.columnsEdu.findIndex(
        item => parseInt(item.id) === parseInt(this.sub.educationid)
      )
    })
    this.initDate()
  },
  computed: {
    columnsEdu () {
      return this.$store.state.classifyEdu
    }
  },
  methods: {
    onLoad () {

    },
    hideusername () { // 是否隐藏名字
      if (this.sub.hideusername) {
        this.sub.hideusername_cn = 1
      } else {
        this.sub.hideusername_cn = 0
      }
    },
    snyphone () {
      if (this.sub.callsny) {
        this.sub.wechat = this.sub.call
      } else {
        this.sub.wechat = ''
      }
    },
    fetchData () {
      http.get(api.pre_save_resume)
        .then(res => {
          this.paymoney = res.data.need_pay_money

          this.sub.id = res.data.id
          this.sub.photo_img_src = res.data.avatar_img
          this.sub.photo_img = res.data.avatar
          this.sub.username = res.data.name
          if (res.data.hide_name == 0) {
            this.sub.hideusername = false
          } else {
            this.sub.hideusername = true
          }
          this.sub.hideusername_cn = res.data.hide_name
          this.sub.sex = res.data.gender + ''
          this.sub.age = res.data.age
          this.sub.educationid = res.data.education
          this.sub.education = res.data.education_str
          if (res.data.enter_job_time == 0 || !res.data.enter_job_time) {
            this.sub.enter_job_time = '0'
            this.sub.enter_job_time_name = '无工作经验'
          } else {
            this.sub.enter_job_time = res.data.enter_job_time
            this.sub.enter_job_time_name = res.data.enter_job_time
          }
          this.sub.address = res.data.living_city
          this.sub.postionname = res.data.professional_title
          this.sub.present = res.data.brief_intro
          this.sub.call = res.data.mobile
          this.sub.wechat = res.data.weixin
        }).catch(() => {
        })
    },
    // 上传头像
    uploadAvatar (file) {
      let fileRaw = file.file
      let filetypeArr = (fileRaw.type || '').split('/')
      let filetype = filetypeArr[1]
      let tyepArr = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      if (tyepArr.indexOf(filetype) == -1) {
        this.$notify('文件类型不支持')
        return false
      }
      if (fileRaw.size > this.$store.state.config.fileupload_size * 1024) {
        let size = this.$store.state.config.fileupload_size / 1024
        size = size.toFixed(1)
        this.$notify('文件大小超出限制，最大' + size + 'mb')
        return false
      }
      this.uploading = true
      http
        .postFormData(api.uploadFile, { file: file.file })
        .then(res => {
          this.uploading = false
          this.sub.photo_img_src = res.data.file_url
          this.sub.photo_img = res.data.file_id
        })
        .catch(err => {
          this.uploading = false
          console.log(err)
        })
    },
    // 选择年龄
    addage (value) {
      this.sub.age = value
      this.isshowage = false
    },
    // 选择最高学历
    onConfirmEducation (value) {
      this.sub.educationid = value.id
      this.sub.education = value.text
      this.showPickerEdu = !this.showPickerEdu
    },
    // 设置日期插件默认值
    initDate () {
      let nowDate = new Date()
      let nowYear = nowDate.getFullYear()
      let minYear = nowYear - 59
      this.minDate = new Date(minYear, 0)
      this.maxDate = nowDate
      this.currentDateEnterJob = nowDate
    },
    // 选择开始工作时间
    onConfirmEnterJob (value) {
      this.sub.enter_job_time = this.dateFormat(value)
      this.sub.enter_job_time_name = this.dateFormat(value)
      this.isNoJobTime = false
      this.showPickerEnterJob = !this.showPickerEnterJob
    },
    // 格式化日期
    dateFormat (time) {
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      return `${year}-${month}`
    },
    // 选择无工作经验
    handleNoJobTime () {
      this.sub.enter_job_time = '0'
      this.sub.enter_job_time_name = '无工作经验'
      this.isNoJobTime = true
      this.showPickerEnterJob = !this.showPickerEnterJob
    },
    toggle () {
      this.show = !this.show
    },
    // 个人介绍
    dopresent (data) {
      this.sub.present = data.specialty
    },
    // 保存
    save () {
      if (!this.sub.username) {
        this.$notify('请填写姓名')
        return false
      }
      if (!this.sub.educationid) {
        this.$notify('请选择学历')
        return false
      }
      if (!this.sub.enter_job_time_name) {
        this.$notify('请选择工作时间')
        return false
      }
      if (!this.sub.postionname) {
        this.$notify('请填写职称')
        return false
      }
      if (!this.sub.present) {
        this.$notify('请填个人简介')
        return false
      }
      if (!this.sub.call) {
        this.$notify('请填写联系电话')
        return false
      }
      var numReg = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/
      var numRe = new RegExp(numReg)
      if (!numRe.test(this.sub.call)) {
        this.$notify('联系电话格式不正确')
        return false
      }

      http
        .post(api.save_resume, {
          id: this.sub.id,
          avatar: this.sub.photo_img,
          name: this.sub.username,
          hide_name: this.sub.hideusername_cn, // 1隐藏  0显示
          gender: this.sub.sex,
          age: this.sub.age,
          education: this.sub.educationid,
          start_work_date: this.sub.enter_job_time,
          living_city: this.sub.address,
          professional_title: this.sub.postionname,
          brief_intro: this.sub.present,
          mobile: this.sub.call,
          weixin: this.sub.wechat
        })
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.sub.id = res.data.id
            if (this.paymoney == '0') {
              this.$notify({ type: 'success', message: res.message })
              this.$router.push({ path: '/freelance/personalinfo' })
            } else {
              this.showPayment = true
            }
          } else {
            this.$notify(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handlerSubmit (payment) {
      this.paymoth = payment
      this.$refs.paySubmit.handlerSubmit(api.order_pay, {
        id: this.sub.id,
        order_type: 1,
        pay_type: this.paymoth,
        redirect_url: this.$store.state.config.mobile_domain + 'freelance/personalinfo'
      })
    }
  },
  mounted () {
    // 改变上传样式
    document
      .querySelector('.van-uploader__wrapper')
      .setAttribute('style', 'height: 100%;width:100%')
    document
      .querySelector('.van-uploader__upload')
      .setAttribute('style', 'margin: 0;height: 100%;width:100%')
    document
      .querySelector('.van-uploader__input')
      .setAttribute('style', 'z-index: 2')
  }
}
</script>
<style lang="scss" scoped>
.van-uploader {
  width: 100%;
  height: 100%;
}
.van-uploader__wrapper {
  width: 100%;
  height: 100%;
  .van-uploader__upload {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}
.center{
    background-color: #f3f3f3;
    height: calc(100vh - 53px);
    overflow: auto;
    .line{
        height: 54px;
        background-color: #ffffff;
        border-left: 18px solid #ffffff;
        border-right: 18px solid #ffffff;
        border-top: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        position: relative;
        &.top{
            margin-top: 5px;
            border-top: 0px solid #f2f2f2;
        }
        &.toptwo{
            margin-top: 5px;
            border-top: 0px solid #f2f2f2;
            height: 112px;
            justify-content: center;
            .logo{
                text-align: center;
                .img{
                    height: 50px;
                    width: 50px;
                    border-radius: 50%;
                    position: relative;
                    img{
                        height: 50px;
                        width: 50px;
                        border-radius: 50%;
                        position: absolute;
                        z-index: 1;
                    }
                }
                .logoname{
                    line-height: 1;
                    margin-top: 8px;
                    font-size: 13px;
                    color: #474f60;
                }
            }
        }
        .title{
            margin-left: 10px;
            line-height: 1;
            font-size: 14px;
            color: #333333;
            position: relative;
        }
        .money{
            position: absolute;
            left: 100px;
            color: #ff5d3c;
            font-size: 14px;
        }
        &.stip{
            justify-content: center;
            font-size: 13px;
            color: #999999;
        }
    }
    .btn{
        margin-top: 30px;
        margin-left: 21px;
        margin-bottom: 30px;
        width: calc(100vw - 42px);
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #464646;
        border-radius: 50px;
        background-color: #fed700;
        box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
    }
    .sync_phone {
      .van-checkbox { line-height: 50px; height: 50px; }
      position: absolute;
      right: 0;
      top: -50px;
      font-size: 14px;
      color: #515151;
      padding: 0 15px;
      height: 50px;
      line-height: 50px;
    }
}
.center::-webkit-scrollbar{
    display: none;
}
</style>
